<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        const data = [
            {
                id: 1,
                title: '课程 1',
                children: [
                    {
                        id: 4,
                        title: '课程 1-1'
                    },
                    {
                        id: 5,
                        title: '课程 1-2',
                        children: [
                            {
                                id: 6,
                                title: '课程 1-2-1'
                            },
                            {
                                id: 7,
                                title: '课程 1-2-2'
                            }
                        ]
                    },
                ]
            },
            {
                id: 2,
                title: '课程 2',
            },
            {
                id: 3,
                title: '课程 3'
            }
        ]
        // 1.粗暴的深度遍历
        // const formatData = []
        // data.forEach(item => {
        //     formatData.push(item)
        //     if (item.children && item.children.length > 0) {
        //         item.children.forEach(item_children => {
        //             formatData.push(item_children)
        //             if (item_children.children && item_children.children.length > 0) {
        //                 item_children.children.forEach(item_children_children => {
        //                     formatData.push(item_children_children)
        //                 })
        //             }
        //         })
        //     }
        // })
        // formatData.map(item => item.children ? delete item.children : '')
        // console.log(formatData)

        // 2.递归
        const formatData = []
        function resetData(params) {
            for (var i = 0; i < params.length; i++) {
                formatData.push(params[i])
                if (params[i].children) {
                    resetData(params[i].children)
                    delete params[i].children
                }
            }
        }
        resetData(data)
        // formatData.map(item => item.children ? delete item.children : '')
        console.log(formatData)
    </script>
</head>

<body>

</body>

</html>